<template>
  <div class="applicatBody" style="width: 100%; height: 100%">
    <div class="Bodycontent">
      <el-row>
        <el-col :span="7">
          <div class="ComponenList flex-comp-group">
            <div class="ComponenList_title">
              <div class="ComponenList_title_icon">
                <img src="../../../../static/images/title-icon.png" alt="">
              </div>
              <div class="title_text">组件列表</div>
            </div>
            <!-- <div class="comList" @click="info">组件列表详情</div> -->
            <div class="comList comList_flex">
              <div class="yt-table-group">
                <el-table
                    class="yt-table"
                    :data="comList"
                    height="100%"
                    @cell-click="rowClick"
                    border
                    style="width: 100%">
                  <el-table-column prop="pluginsName" label="组件名" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="fileName" label="源件名称" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="addTimeStr" label="新增时间" show-overflow-tooltip>
                  </el-table-column>
                  <el-table-column prop="editTimeStr" label="修改时间" show-overflow-tooltip>
                  </el-table-column>
                </el-table>
              </div>
              <div class="yt-table-b_btn" style="text-align: center">
                <el-button size="small" @click="$router.push({name:'CompList'})" type="primary">详情展示...</el-button>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="ComponenList flex-comp-group in-service-comp">
            <div class="ComponenList_title">
              <div class="ComponenList_title_icon">
                <img src="../../../../static/images/title-icon.png" alt="">
              </div>
              <div class="title_text">组件汇总</div>
            </div>
            <div class="component-body">
              <EchartBar :data="inServiceData"></EchartBar>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="ComponenList flex-comp-group">
            <div class="ComponenList_title">
              <div class="ComponenList_title_icon">
                <img src="../../../../static/images/title-icon.png" alt="">
              </div>
              <div class="title_text">开发流程</div>
            </div>
            <div class="process comList_flex">
              <div style="height: 100%">
                <el-steps direction="vertical">
                  <el-step title="录入组件基本信息"></el-step>
                  <el-step title="录入运行环境"></el-step>
                  <el-step title="输入组件函数与监控信息"></el-step>
                  <el-step title="可选配置组件监控信息"></el-step>
                  <el-step title="可选配置组件故障切换信息"></el-step>
                  <el-step title="一键检测"></el-step>
                </el-steps>
              </div>
              <div class="yt-table-b_btn" style="text-align: center">
                <el-button size="small" type="primary" @click="$router.push({name:'CompRegister'})" v-if="auth&&auth.add">开始注册</el-button>
                <el-button size="small" type="primary" @click="isMb = true" v-if="auth&&auth.add">导入组件</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="Bodycontent">
      <el-row>
        <el-col :span="7">
          <div class="ComponenList">
            <div class="ComponenList_title">
              <div class="ComponenList_title_icon">
                <img src="../../../../static/images/title-icon.png" alt="">
              </div>
              <div class="title_text">组件信息</div>
            </div>
            <div class="comInfo">
              <div class="body">
                <div class="infoItem" v-if="comInfoTab.length > 0">
                  <div class="title">函数信息</div>
                  <el-table
                      class="yt-table alarm-table"
                      :data="comInfoTab"
                      max-height="100%"
                      @cell-click="rowClick"
                      border
                      style="width: 100%">
                    <el-table-column prop="functionName" label="函数名" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="paramInputClass" label="入参类型" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="paramOutputClass" label="出参类型" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="addTimeStr" label="新增时间" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="editTimeStr" label="修改时间" show-overflow-tooltip></el-table-column>
                  </el-table>
                </div>
                <div class="infoItem" v-if="monInfo.length">
                  <div class="title">监控信息</div>
                  <el-table
                      class="yt-table"
                      :data="monInfo"
                      border
                      style="width: 100%">
                    <el-table-column prop="monitorRate" label="监控频率" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="monitorType" label="监控类型" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="addTimeStr" label="新增时间" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="editTimeStr" label="修改时间" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="" label="" show-overflow-tooltip></el-table-column>
                  </el-table>
                </div>
                <div class="infoItem" v-if="envInfo.length">
                  <div class="title">环境信息</div>
                  <el-table
                      class="yt-table"
                      :data="envInfo"
                      border
                      style="width: 100%">
                    <el-table-column prop="requireCPU" label="最小CPU" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="requireGPU" label="最小GPU" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="requireDisk" label="最小存储单元" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="addTimeStr" label="新增时间" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="editTimeStr" label="修改时间" show-overflow-tooltip></el-table-column>
                  </el-table>
                </div>
                <div class="infoItem" v-if="switchInfo.length">
                  <div class="title">切换信息</div>
                  <el-table
                      class="yt-table"
                      :data="switchInfo"
                      border
                      style="width: 100%">
                    <el-table-column prop="switchName" label="组件切换名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="switchAddress" label="组件切换地址" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="addTimeStr" label="新增时间" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="editTimeStr" label="修改时间" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="" label="" show-overflow-tooltip></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="ComponenList flex-comp-group">
            <div class="ComponenList_title">
              <div class="ComponenList_title_icon">
                <img src="../../../../static/images/title-icon.png" alt="">
              </div>
              <div class="title_text">组件告警</div>
            </div>
            <div class="comList comList_flex">
              <div class="yt-table-group alarm-table">
                <AutoScrollTable :list="compAlarmList"></AutoScrollTable>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="ComponenList flex-comp-group">
            <div class="ComponenList_title">
              <div class="ComponenList_title_icon">
                <img src="../../../../static/images/title-icon.png" alt="">
              </div>
              <div class="title_text">组件库</div>
            </div>
            <div class="comList comList_flex">
              <div class="yt-table-group alarm-table">
                <EchartPie :datas="compTypeList"></EchartPie>
                <!--<el-table-->
                <!--    class="yt-table"-->
                <!--    :data="compTypeList"-->
                <!--    height="100%"-->
                <!--    border-->
                <!--    style="width: 100%">-->
                <!--  <el-table-column prop="name" label="组件名称" show-overflow-tooltip></el-table-column>-->
                <!--  <el-table-column prop="value" label="数量占比" show-overflow-tooltip></el-table-column>-->
                <!--</el-table>-->
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <Dialog
        :addNewVisible="isMb"
        @closeDia="MbClo"
        width="720px"
        :center="true"
        title="模板注册"
        class="Htest">
      <div slot="body">
        <el-button type="primary">下载</el-button>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Dialog from "@/components/Dialog/Dialog.vue";
import AutoScrollTable from "@/components/AutoScrollTable";
import {
  get_selectPluginsByUser,
  get_selectPFunctionByPluginsId,
} from "../../../apis/comList/comList";
import EchartBar from './comp/EchartBar'
import EchartPie from './comp/EchartPie'
import {formatDate} from '@/utils'
import {initPlgsAplsGalarm, initPluginsTpCount} from "../../../apis/home/indexHome";

export default {
  components: {Dialog, EchartBar, AutoScrollTable, EchartPie},
  data() {
    return {
      auth: null,
      isMb: false,
      comList: [], //组件列表
      comInfo: [], //组件信息
      comInfoTab: [], //函数
      envInfo: "",
      monInfo: "",
      switchInfo: "",
      inServiceData: {
        max: 0,
        data: [],
        axis: [],
        legendData: []
      },
      compAlarmList: [],
      compTypeList: []
    };
  },
  created() {
    this.getComList();
    this.getpluginsLiberCount()
    this.getCompAlarmList()
    this.getCompTypeList()
  },
  methods: {
    MbClo() {
      this.isMb = false;
    },
    // 获取用户组件列表
    getComList() {
      get_selectPluginsByUser({
        menuId: this.$route.meta.id
      }).then((res) => {
        let {data, code, auth} = res.data;
        if (code === 0) {
          this.auth = auth
          this.comList = data.map(item => {
            return {
              ...item,
              addTimeStr: formatDate('yyyy-MM-dd', item.addTime),
              editTimeStr: item.editTime ? formatDate('yyyy-MM-dd', item.editTime) : '--',
            }
          });
          this.getrow(data[0].id);
        }
      });
    },

    // 组件库类别统计 (运行中的组件)
    getpluginsLiberCount() {
      let colors = ['#2aef8a', '#2a89ef', '#ef2222', '#a7a7a7']
      let names = ['运行成功', '运行中', '运行失败', '其他']
      this.$api.pluginsLiberCount().then(res => {
        let {data, code, count} = res.data;
        if (code === 0) {
          let dataAxis = [];
          let maxNums = []
          let dataList = data.map(item => {
            dataAxis.push({
              name: names[item.state] || '其他',
              itemStyle: {
                color: colors[item.state] || '#a7a7a7'
              }
            })
            maxNums.push(item.rsList.reduce(function (total, cur) {
              return total + parseInt(cur.value);
            }, 0))
            return {
              type: 'bar',
              name: names[item.state] || '其他',
              stack: 'status',
              emphasis: {},
              itemStyle: {
                color: (params) => {
                  return colors[params.data.state] || '#a7a7a7'
                }
              },

              barMaxWidth: 20,
              coordinateSystem: 'polar',
              data: item.rsList.map(rsItem => {
                return {
                  value: parseInt(rsItem.value),
                  name: rsItem.name,
                  state: item.state
                }
              })
            }
          })
          this.inServiceData.data = dataList
          this.inServiceData.axis = dataAxis
          this.inServiceData.max = Math.max.apply(Math, maxNums.map(item => {
            return item
          }))
        }
      })

    },

    // 组件信息
    getrow(id) {
      this.comInfoTab = []; //函数
      this.envInfo = [];
      this.monInfo = [];
      this.switchInfo = [];
      get_selectPFunctionByPluginsId({
        pluginsId: id,
      }).then((res) => {
        let {data, code} = res.data;
        if (code === 0) {
          // 函数信息
          this.comInfoTab = data.pfunctionList.map(item => {
            return {
              ...item,
              addTimeStr: item.addTime ? formatDate('yyyy-MM-dd', item.addTime) : '--',
              editTimeStr: item.editTime ? formatDate('yyyy-MM-dd', item.editTime) : '--'
            }
          })
          // 监控信息
          if (data.pamonitor) {
            data.pamonitor.monitorType = ["监控进程", "监控数据", "监控全部"][data.pamonitor.monitorType];
            data.pamonitor.addTimeStr = formatDate('yyyy-MM-dd', data.pamonitor.addTime)
            data.pamonitor.editTimeStr = formatDate('yyyy-MM-dd', data.pamonitor.editTime)
            this.monInfo = [data.pamonitor];
          }
          // 环境信息
          if (data.parequire) {
            data.parequire.addTimeStr = formatDate('yyyy-MM-dd', data.parequire.addTime)
            data.parequire.editTimeStr = formatDate('yyyy-MM-dd', data.parequire.editTime)
            this.envInfo = [data.parequire];
          }
          // 切换信息
          if (data.paswitch) {
            data.paswitch.addTimeStr = formatDate('yyyy-MM-dd', data.paswitch.addTime)
            data.paswitch.editTimeStr = formatDate('yyyy-MM-dd', data.paswitch.editTime)
            this.switchInfo = [data.paswitch];
          }
        }
      });
    },

    //点击列表行数据
    rowClick(row) {
      this.getrow(row.id);
    },
    // 组件告警列表
    getCompAlarmList() {
      initPlgsAplsGalarm({alarmType: 1}).then((res) => {
        this.compAlarmList = res.data.data.map(item => {
          return {
            ...item,
            alarmTypeNmae: ['应用', '组件', '资源', '默认', '其他'][item.alarmType],
            timeStr: formatDate('yyyy-MM-dd', item.alarmTime),
            levelStr: ['特别严重', '严重', '较重', '一般'][item.alarmLevel - 1],
            clearStr: ['未清除', '已清除'][item.alarmClear],
            alarmTimeStr: formatDate('yyyy-MM-dd', item.alarmTime)
          }
        });
      });
    },
    // 组件库列表
    getCompTypeList() {
      initPluginsTpCount().then((res) => {
        this.compTypeList = res.data.data.map(item => {
          return {
            value: Number(item.value).toFixed(2),
            name: item.name
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
  .Bodycontent {
    width: 100%;
    height: 50%;
    box-sizing: border-box;
    overflow: hidden;

    .el-row {
      width: 100%;
      height: 100%;

      .el-col {
        height: 100%;

        .ComponenList {
          height: 100%;

          .ComponenList_title {
            height: 40px;
            font-weight: 700;
            color: #fff;
          }

          .process {
            padding-top: 30px;
            padding-left: 30px;

            p {
              font-size: 20px;
              margin: 10px 0;
            }
          }

          .f_butoon {
            text-align: center;
            margin-top: 20px;
          }
        }
      }
    }
  }

  .ComponenList {
    box-sizing: border-box !important;

    background-image: url("../../../../static/images/table-sm-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 5px 10px 10px 10px;

    &.flex-comp-group {
      display: flex;
      flex-direction: column;

      .component-body {
        height: 100%;
      }
    }

    .ComponenList_title {
      flex-shrink: 0;
      position: relative;
      display: flex;
      align-items: center;


      .ComponenList_title_icon {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 25px;
        height: 40px;
        display: flex;
        align-items: center;

        img {
          margin-left: 5px;
          width: 13px;
        }
      }

      .title_text {
        padding-left: 25px;
        color: #20c6fb;
        font-size: 18px;
        font-weight: bold;
      }
    }

    .comList_flex {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .yt-table-group {
      height: 100%;
      overflow: hidden;

      &.alarm-table {
        padding: 0 10px 0 10px;
      }
    }

    .yt-table-b_btn {
      flex-shrink: 0;
      padding-top: 5px;
      padding-bottom: 5px;
    }
  }

  .process {
    height: 100%;

    /deep/ .el-step__title {
      color: #ffffff;
    }
  }

  .comList {
    width: 100%;
    height: calc(100% - 40px);
    box-sizing: border-box;

    /deep/ .cell {
      text-align: center;
    }

    /deep/ .el-table__row {
      cursor: pointer;
    }
  }

  .comInfo {
    width: 100%;
    height: calc(100% - 40px);
    overflow-y: scroll;
    box-sizing: border-box;
    padding: 0 0 0 10px;

    .body {
      height: 200px;
    }

    /deep/ .el-table__row {
      cursor: pointer;
    }

    .infoItem {
      .title {
        padding: 10px 0;
        font-weight: 700;
        font-size: 15px;
        color: #20c6fb;
        text-align: center;
        border-right: solid 1px #216892;
        border-left: solid 1px #216892;
        /*background-color: rgba(255, 255, 255, .4);*/
      }

      &:first-child {
        .title {
          border-top: solid 1px #216892;
        }
      }
    }

    .info {
      display: flex;

      span {
        display: block;
        min-width: 33%;
      }
    }
  }
</style>